<template>
  <div class="x-header">
    <div class="x-header--wrap clearfix">
      <router-link to="/" class="x-logo">
        <img src="../assets/logo.png" alt="LOGO" width="125" height="32">
      </router-link>

      <div class="x-menu">
        <span class="menu-user">{{ topic }}</span>
        <span class="menu-icon--link" @click="goNav($event)">
          <i class="menu-icon"></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
  import { topicTitleConfig } from '../config/title.config'

export default {
  data() {
    return {
      topic: ''
    }
  },
  mounted() {
    const route = this.$route
    const { name } = route

    if(name) {
      if(name.indexOf('support') !== -1) {
        this.topic = 'SUPPORT'
      } else {
        this.topic = topicTitleConfig[name] || ''
      }
    } else {
      this.topic = ''
    }
  },
  methods: {
    goNav(e) {
      const route = this.$route
      const current = route.name

      this.$router.push({
        name: 'nav',
        params: {
          current
        }
      })
    }
  }
}
</script>

<style scoped>
  .x-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-sizing: border-box;
    border-top: 4px solid maroon;
    background: #fff;
  }

  .x-header--wrap {
    max-width: 1920px;
    margin: 0 auto;
    padding: 15px 30px;
  }

  /* logo */
  .x-logo {
    float: left;
  }

  .x-menu {
    float: right;
    line-height: 32px;
  }

  .menu-user {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    margin-right: 3px;
  }

  .menu-icon--link {
    cursor: pointer;
    display: inline-block;
    width: 29px;
    height: 32px;
    vertical-align: middle;
    position: relative;
  }

  .menu-icon {
    display: inline-block;
    width: 29px;
    height: 21px;
    background: url("../assets/menu.png") 0 0 no-repeat;

    position: absolute;
    top: 4px;
    right: 0;
  }
</style>
